<template>
  <view class="batch-view-container">

    
    <!-- 批次信息卡片 -->
    <view class="batch-card">
      <!-- 商品图片 -->
      <view class="product-image-section">
        <image 
          :src="getFirstImage(productInfo['6864930a4e2949f411990010'])" 
                mode="aspectFill"
          class="product-image"
        ></image>
      </view>
      
      <!-- 商品基本信息 -->
      <view class="product-basic-info">
        <text class="product-name">{{ productInfo['68634c1c87058ae1c65da306'] || '' }}</text>
        <text class="product-barcode">条码：{{ productInfo['686657f757603df8e65d277d'] }}</text>
         <!-- <text class="product-barcode">规格：{{ productInfo['689edec9a92ea0c35cc9cd28'] }}</text> -->
          <text class="product-barcode">箱规：{{ productInfo['689edec9a92ea0c35cc9cd28'] }}</text>
           <text class="product-barcode">总库存：{{ productInfo['68e753ee6f2593f6303629e2'] }}箱</text>
      </view>
      

      <!-- 批次列表 -->
      <view class="batch-list" v-if="productInfo && productInfo['68887ab30e18077cf8de4355'] && safeBatchList.length > 0">
        <view class="batch-list-title">批次明细</view>
        <view class="batch-item" v-for="(batch, index) in safeBatchList" :key="index">
          <view class="batch-header">
            <text class="batch-no">生产日期：</text>
            <text class="batch-date">{{ (batch && batch.sourcevalue ? JSON.parse(batch.sourcevalue)['68887b720e18077cf8de43b7'] : '') || '无数据' }}</text>
          </view>
             <view class="batch-header">
            <text class="batch-no">破损品：</text>
            <text class="batch-date">{{ (batch && batch.sourcevalue ? JSON.parse(batch.sourcevalue)['6891619bf6303e511c9a7721'] : 0) }}箱</text>
          </view>
            <view class="batch-header">
            <text class="batch-no">正常品：</text>
            <text class="batch-date">{{ (batch && batch.sourcevalue ? JSON.parse(batch.sourcevalue)['6891619bf6303e511c9a7720'] : 0) }}箱</text>
          </view>
      
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import http from '../../../utils/request'
import { callWorkflowListAPI, callWorkflowAPI, callWorkflowListAPIPaged } from '../../../utils/workflow'
import { useUserStore } from '../../../store/user'
import { onLoad, onReady, onUnload, onShow, onBackPress } from '@dcloudio/uni-app'
import { useTaskStore } from '../../../store/task'

const productInfo = ref({})

const getFirstImage = (imageData) => {
  if (!imageData) return ''
  
  try {
    // 如果已经是字符串数组，直接返回第一个
    if (Array.isArray(imageData)) {
      return imageData[0] || ''
    }
    
    // 如果是JSON字符串，解析后取第一个图片的thumbnail_full_path
    const parsedData = JSON.parse(imageData)
    if (Array.isArray(parsedData) && parsedData.length > 0) {
      return parsedData[0].thumbnail_full_path || parsedData[0].file_path || ''
    }
  } catch (error) {
    console.error('解析图片数据失败:', error)
  }
  
  return ''
}



// 安全的批次数据计算属性
const safeBatchList = computed(() => {
  if (!productInfo.value || !productInfo.value['68887ab30e18077cf8de4355']) {
    return []
  }
  try {
    const batchData = JSON.parse(productInfo.value['68887ab30e18077cf8de4355'])
    return Array.isArray(batchData) ? batchData : []
  } catch (error) {
    console.error('解析批次数据失败:', error)
    return []
  }
})

// 模拟批次数据
const batchList = ref([
  {
    batchNo: 'B20240115001',
    date: '2024-01-15',
    quantity: 500,
    status: '正常'
  },
  {
    batchNo: 'B20240120002',
    date: '2024-01-20',
    quantity: 750,
    status: '正常'
  }
])

// 获取商品管理
const getProduct = async (rowid) => {
  try {
    const res = await callWorkflowAPI('68634c1c87058ae1c65da305', rowid)
    if (res) {
      console.log('商品详情', res);
      productInfo.value = res

      if(res['68887ab30e18077cf8de4355']){
        console.log('批次明细数组', JSON.parse(res['68887ab30e18077cf8de4355']));
        
        console.log('生产日期', JSON.parse(JSON.parse(res['68887ab30e18077cf8de4355'])[0].sourcevalue)['68887b720e18077cf8de43b7']);
        console.log('破损品', JSON.parse(JSON.parse(res['68887ab30e18077cf8de4355'])[0].sourcevalue))['6891619bf6303e511c9a7721'];
        console.log('正常品', JSON.parse(JSON.parse(res['68887ab30e18077cf8de4355'])[0].sourcevalue))['6891619bf6303e511c9a7720'];
        
      }

      // await getProductDetail(rowid)
    }
  } catch (error) {
    uni.$u.toast(error.message)
  } finally {
    loading.value = false
  }
}

const getProductDetail = async (rowid) => {
  try {
    const res = await callWorkflowAPI('68634c1c87058ae1c65da305', rowid)
    if (res) {
      console.log('商品详情', res);
      productInfo.value = res
    }
  } catch (error) {
    uni.$u.toast(error.message)
  } finally {
    loading.value = false
  }
}



onLoad((options) => {
  if (options) {
      getProduct(options.rowid)
  }
})
</script>

<style lang="scss" scoped>
.batch-view-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.batch-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.product-image-section {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
  
  .product-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
    object-fit: cover;
  }
}

.product-basic-info {
  text-align: center;
  margin-bottom: 40rpx;
  
  .product-name {
    display: block;
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 16rpx;
  }
  
  .product-barcode {
    display: block;
    font-size: 28rpx;
    color: #666666;
  }
}



.batch-list {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 30rpx;
  
  .batch-list-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20rpx;
  }
  
  .batch-item {
    background-color: #f8f8f8;
    border-radius: 12rpx;
    padding: 20rpx;
    margin-bottom: 16rpx;
    
    .batch-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12rpx;
      
      .batch-no {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
      }
      
      .batch-date {
        font-size: 28rpx;
        font-weight: bold;
        color: #999999;
      }
    }
    
   
  }
}
</style>